import React from 'react';
import { Nav, Button } from '@douyinfe/semi-ui';
import { IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
import navConfig from '../config/nav.config';
import { withRouter } from 'react-router-dom';

// 递归构造菜单项
const buildNavItems = (configList, basePath = '') => {
    return configList.map(item => {
        const cleanedPath = item.path.startsWith('/') ? item.path.slice(1) : item.path;

        const navItem = {
            itemKey: cleanedPath,
            text: item.name,
            icon: item.icon || null,
        };

        if (item.children && item.children.length > 0) {
            navItem.items = buildNavItems(
                item.children.map(child => ({
                    ...child,
                    path: `${item.path.replace(/\/$/, '')}${child.path}`,
                }))
            );
        }

        return navItem;
    });
};

class NavApp extends React.Component {
    handleSelect = ({ itemKey }) => {
        const { history } = this.props;
        const path = itemKey === '' ? '/' : `/${itemKey}`;
        history.push(path);
    };

    render() {
        return (
            <div style={{ width: '100%' }}>
                <Nav
                    mode="horizontal"
                    items={buildNavItems(navConfig)}
                    onSelect={this.handleSelect}
                    header={{
                        logo: <IconGlobe style={{ fontSize: 36 }} />,
                        text: '智能时空信息实验室监测系统',
                    }}
                    // footer={
                    //     <Button
                    //         theme="borderless"
                    //         icon={<IconHelpCircle size="large" />}
                    //         style={{
                    //             color: 'var(--semi-color-text-2)',
                    //             marginRight: '12px'
                    //         }}
                    //     />
                    // }
                    style={{
                        backgroundColor: 'rgba(255, 255, 255, 0.1)', // 半透明背景确保内容清晰可见，测试用
                    }}
                />
            </div>
        );
    }
}

export default withRouter(NavApp);
